<template>
  <div class="container">
    <van-nav-bar fixed title="首页" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img class="banner-img" :src="$getUrl(item.advimgsrc)" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 通知 -->
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <!-- 热门推荐 -->
    <van-cell>
      <h3 slot="title" class="group-title">热门推荐</h3>
    </van-cell>
    <recommend-list :list="hotList" />
    <!-- 最近更新 -->
    <van-cell>
      <h3 slot="title" class="group-title">最近更新</h3>
      <span>24小时： <b>0篇</b></span> /
      <span>1周： <b>0篇</b></span>
    </van-cell>
    <div class="article-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <article-list v-for="item in newList" :key="item.id" :item="item" />
      </van-list>
    </div>
  </div>
</template>
<script>
import articleList from '@/components/article-list.vue'
import RecommendList from '@/components/recommend-list.vue'
import { getNew, getHot, getIndex } from '@/api/index.js'
export default {
  components: { articleList, RecommendList },
  data () {
    return {
      bannerList: [],
      hotList: [],
      newList: [],
      loading: false,
      finished: false,
      page: 1,
      limit: 10
    }
  },
  async created () {
    // 轮播图
    const res1 = await getIndex()
    this.bannerList = res1.data.banner
    // 热门推荐
    const res2 = await getHot()
    this.hotList = res2.data.list
  },
  methods: {
    async onLoad () {
      // 最近更新
      const res3 = await getNew({
        page: this.page,
        limit: this.limit
      })
      this.newList.push(...res3.data.list.data)
      this.loading = false
      this.page++
      if (this.page > res3.data.list.count / this.limit) {
        this.finished = true
      }
    },
  },

}
</script>
<style scoped lang="less">
.van-nav-bar {
  z-index: 999;
}
.banner-img {
  width: 100%;
}
.group-title {
  color: #1989fa;
}
</style>
